<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>035-元素浮动后的特点</title>
		<style>
			.box {
				width: 400px;
				height: 400px;
				padding: 10px;
				background-color: gray;
			}

			.d1 {
				height: 50px;
				background-color: yellow;
			}

			.d2 {
				height: 50px;
				background-color: pink;
				float: left;
			}

			.d3 {
				height: 50px;
				background-color: skyblue;
				float: left;
			}
		</style>
	</head>
	<body>
		<!--
      元素浮动后的特点:
      1. 脱离文档流。
      2. 不管元素浮动前是什么元素，元素浮动后，默认宽与高都是被内容撑开，而且可以设置宽高（类似于变成行内块）。
      3. 在当前自身位置浮动起来，下方的元素会上移到浮动元素下方，与它共用一行。
      4. 浮动元素不会存在 margin 合并和塌陷的问题。
      5. 不会像行内块一样被当做文本处理（没有行内块元素的空隙问题）。
      -->

		<div class="box">
			<div class="d1">DIV1</div>
			<div class="d2">DIV2</div>
			<div class="d3">DIV3</div>
		</div>
	</body>
</html>
